<template>
  <view class="article-item">
    <view class="article-content row">
      <view class="left-text column">
        <text class="title text-ellipsis">{{data.title}}</text>
        <text class="summary text-ellipsis">{{data.summary}}</text>
      </view>
      <view class="right-images" v-if="data.imageUrl">
        <image :src="data.imageUrl" lazy-load></image>
      </view>
    </view>
    <view class="article-info">
      <text class="info-text">{{data.nickName}}</text>
      <text class="info-text"> · {{data.updateDate}}</text>
      <text class="info-text">  · {{data.thumhup}} 赞</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import {reactive,getCurrentInstance} from 'vue'
  const props = defineProps({
    item:{
      type:Object
    }
  })
  
  let data = reactive({})
  data = props.item
  const {proxy} = getCurrentInstance()
  data.updateDate = proxy.$utils.dateFormat(data.updateDate)
</script>

<style scoped lang="scss">
  .text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .article-item{
    padding: 30rpx;
    border-bottom: 1rpx solid #f1f1f1;
    .article-content{
      .left-text{
        .title{
          font-size: 35rpx;
          font-weight: bold;
        }
        .summary{
          padding-top: 5rpx;
          font-size: 26rpx;
          color: #999;
          -webkit-line-clamp: 1;
        }
      }
      .right-images{
        min-width: 220rpx;
        margin-left: 15rpx;
        image{
          width: 220rpx;
          height: 140rpx;
          border-radius: 10rpx;
        }
      }
    }
    .article-info{
      .info-text{
        font-size: 26rpx;
        padding-right: 10rpx;
        color: #999;
        &:first-child{
          color: #222222;
        }
      }
    }
  }
</style>